/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-29 16:37:56
 * @LastEditTime: 2022-05-06 10:28:52
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component, lazy, Suspense } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'

import MyNavLink from './components/MyNavLink'


import Header from './components/Header'
const Home = lazy(() => import('./page/Home'))
const About = lazy(() => import('./page/About'))



export default class App extends Component {
  state = {
    a: 1
  }
  // 函数 setState
  change = () => {
    this.setState((state, props) => ({ a: state.a + 1 }))
  }
  render() {
    return (
      <div>
        {this.state.a}
        <button onClick={this.change}>加一</button>
        <Header></Header>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to='/home' >Home</MyNavLink>
              <MyNavLink to='/about'>About</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Suspense fallback={<h1>loading....</h1>}>
                  <Switch>
                    <Route path='/home' component={Home}></Route>
                    <Route exact path='/about' component={About}></Route>
                    <Redirect to='/home'></Redirect>
                  </Switch>
                </Suspense>

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
